<template>
  <el-card style="height: 80px;">
    <el-form :model="SearchParams" :inline="true" class="form">
      <el-form-item label="活动时间:" prop="current">
        <el-date-picker
            v-model="SearchParams.currentTime"
            type="datetime"
            placeholder="请您输入活动时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="活动状态:">
        <el-select
            v-model="SearchParams.status"
            placeholder="请选择"
            style="width: 240px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">搜索</el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px;">
    <el-button type="primary" size="default" @click="addActivity">添加活动</el-button>
    <el-button type="primary" size="default"
               @click="getAllActivity()">全部
    </el-button>
    <el-button type="primary" size="default"
               @click="getActivityList('0')">已发布
    </el-button>
    <el-button type="primary" size="default"
               @click="getActivityList('1')">上线
    </el-button>
    <el-button type="primary" size="default"
               @click="getActivityList('2')">下线
    </el-button>
    <!-- table展示用户信息 -->
    <el-table style="margin: 10px 0px;" border :data="activityArr">
      <el-table-column label="#" align="center" type="index"></el-table-column>
      <el-table-column label="ID" align="center" prop="id"></el-table-column>
      <el-table-column label="活动名称" align="center" prop="activityName" show-overflow-tooltip></el-table-column>
      <el-table-column label="活动开始时间" align="center" prop="startTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="活动结束时间" align="center" prop="endTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="活动状态" width="100px">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag>{{ scope.row.status === 0 ? '已发布' : (scope.row.status === 1 ? '上线' : '下线') }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="活动描述" align="center" prop="activityDesc" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="400px" align="center">
        <template #="{ row, $index }">
          <el-button type="primary" size="small" icon="User" @click="getActivityDetail(row.id)">详情</el-button>
          <el-button type="primary" size="small" icon="Edit" @click="updateStatus(row.id,'1')">上线</el-button>
          <el-button type="primary" size="small" icon="Edit" @click="updateStatus(row.id,'2')">下线</el-button>
          <el-popconfirm :title="`你确定要删除${row.activityName}?`" width="260px" @confirm="delActivity(row.id)">
            <template #reference>
              <el-button type="primary" size="small" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 抽屉结构:完成添加新的用户账号|更新已有的账号信息 -->
  <el-dialog v-model="drawer" :title="scence?'添加活动':'活动详情'" width=800>
    <el-form :model="ActivityParams" :rules="rules" ref="formRef">
      <el-form-item label="活动名称" prop="activityName">
        <el-input placeholder="请您输入活动名称" :disabled="!scence"
                  v-model="ActivityParams.activityName"></el-input>
      </el-form-item>
      <el-form-item :inline="true" label="开始时间" prop="startTime">
        <el-date-picker
            v-model="ActivityParams.startTime"
            :disabled="!scence"
            type="datetime"
            placeholder="请您输入活动开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>

      <el-form-item :inline="true" label="结束时间" prop="endTime">
        <el-date-picker
            v-model="ActivityParams.endTime"
            :disabled="!scence"
            type="datetime"
            placeholder="请您输入活动结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="活动描述" prop="activityDesc">
        <el-input placeholder="请您输入活动描述" :disabled="!scence" type="textarea"
                  v-model="ActivityParams.activityDesc"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer=false">取消</el-button>
        <el-button :disabled="!scence" type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Records, ActivityResponseData, Status, Activity } from '@/api/seckill/activity/type'
import {
  reqActivityInfoAll,
  reqDelActivity,
  reqGetActivityById,
  reqActivityInfoList,
  reqAddActivity,
  reqUpdateStatus,
  reqGetSeckillActivityListBetweenStartTimeAndEndTime
} from '@/api/seckill/activity'

const options = [
  {
    value: '0',
    label: '已发布',
  },
  {
    value: '1',
    label: '上线',
  },
  {
    value: '2',
    label: '下线',
  },
]
//默认页码
let activityArr = ref<Records>([])
//控制分配角色抽屉显示与隐藏
let drawer = ref<boolean>(false)
//获取form组件实例
let formRef = ref<any>()
// 场景
let scence = ref<boolean>()
//收集用户信息的响应式数据
let ActivityParams = reactive<Activity>({
  activityName: '',
  startTime: '',
  endTime: '',
  activityDesc: '',
})
//收集用户信息的响应式数据
let SearchParams = reactive<any>({
  status: '',
  currentTime: '',
})
//组件挂载完毕
onMounted(() => {
  getAllActivity()
})
//获取全部的活动
const getAllActivity = async () => {
  let result: ActivityResponseData = await reqActivityInfoAll()
  if (result.code == 1001) {
    activityArr.value = result.data
  }
}
//根据状态获取活动
const getActivityList = async (status: string) => {
  let result: ActivityResponseData = await reqActivityInfoList(status as string)
  if (result.code == 1001) {
    console.log(result.data)
    activityArr.value = result.data
  }
}
// 删除活动
const delActivity = async (id: number) => {
  let result: ActivityResponseData = await reqDelActivity(id as number)
  if (result.code == 1001) {
    //再次获取全部的活动
    getAllActivity()
  }
}
//搜索
const search = async () => {
  console.log('current--',SearchParams.current)
  let result: ActivityResponseData = await reqGetSeckillActivityListBetweenStartTimeAndEndTime(SearchParams.currentTime,SearchParams.status)
  if (result.code == 1001) {
    activityArr.value = result.data
  }
}
//重置按钮的回调
const reset = () => {
  //清空数据
  Object.assign(SearchParams, {
    currentTime: '',
    status: '',
  })
  //再次获取全部的活动
  getAllActivity()
}
//添加活动
const addActivity = () => {
  //抽屉显示出来
  drawer.value = true
  scence.value = true
  //清空数据
  Object.assign(ActivityParams, {
    activityName: '',
    startTime: '',
    endTime: '',
  })
  //清除上一次的错误的提示信息
  nextTick(() => {
    formRef.value.clearValidate('activityName')
    formRef.value.clearValidate('id')
    formRef.value.clearValidate('startTime')
    formRef.value.clearValidate('endTime')
    formRef.value.clearValidate('activityDesc')
  })
}
// 查看活动详情
const getActivityDetail = async (id: number) => {
  //显示出对话框
  drawer.value = true
  scence.value = false
  let result: ActivityResponseData = await reqGetActivityById(id as number)

  if (result.code == 1001) {
    Object.assign(ActivityParams, result.data)
  }
  //清空上一次表单校验错误结果
  nextTick(() => {
    formRef.value.clearValidate('id')
    formRef.value.clearValidate('activityDesc')
    formRef.value.clearValidate('activityName')
    formRef.value.clearValidate('startTime')
    formRef.value.clearValidate('endTime')
  })
}
//自定义校验规则的回调
const validatorRoleName = (rule: any, value: any, callBack: any) => {
  if (value.trim().length >= 2) {
    callBack()
  } else {
    callBack(new Error('职位名称至少两位'))
  }
}
//职位校验规则
const rules = {
  activityName: [
    { required: true, trigger: 'blur', validator: validatorRoleName },
  ],
}

//确定按钮的回调
const save = async () => {
  //表单校验结果,结果通过在发请求、结果没有通过不应该在发生请求
  await formRef.value.validate()
  //添加活动
  let result: any = await reqAddActivity(ActivityParams)
  if (result.code == 1001) {
    //提示文字
    ElMessage({ type: 'success', message: '添加成功' })
    //对话框显示
    drawer.value = false
    //再次获取全部的活动
    getAllActivity()
  }
}
//上线和下线
const updateStatus = async (id: number, status: string) => {
  //添加职位|更新职位的请求
  let result: any = await reqUpdateStatus(id, status)
  if (result.code == 1001) {
    //提示文字
    ElMessage({ type: 'success', message: '修改成功' })
    //再次获取全部的活动
    getAllActivity()
  }
}
</script>

<style scoped>

</style>
